<template>
<div class="planlist">
    <div class="items clearfix">
        <div class="search">
            <el-input placeholder="请输入要查询的关键词"  @keyup.enter.native="search(keywords)" clearable v-model="keywords" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="search(keywords)"></el-button>
            </el-input>
        </div>
        <div class="null ani1" v-if="data.count == 0">
            <div class="icon">
                <img src="../assets/null.png" alt="">
            </div>
            <p>暂无方案模板</p>
        </div>
        <div class="col-12" v-for="(item,index) in data.data" :key="index" :class="`ani${index+1}`">
            <div class="item">
                <div class="thumb">
                    <p class="type">{{item.typename}}</p>
                </div>
                <div class="plan-info">
                    <h3>{{item.templatename}}</h3>
                    <div class="desc">
                        <p>{{item.shuoming}}</p>
                    </div>
                    <el-button size="small" icon="el-icon-edit" @click="plan('order/add/',item.id)">添加方案</el-button>
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script>
export default {
	name: 'Home',
	data(){
		return{
			data: '',
            token: '',
            value: '',
            keywords: ''
		}
	},
	mounted() {
		let token  = this.$storage.localGet('userinfo');
		if(token.logincode !== undefined){
            this.token = token;
			this.getplanlist(token.logincode);
		}else{
			this.$router.push('/login');
		}
	},
	methods:{
		plan(url,id){
			this.$router.push(url+id);
        },
        select(name){
            console.log(name);
        },
		getplanlist(token,keywords){
            let vm = this;
            keywords = keywords ? keywords :'';
			vm.$api.init.getplanlist(token,keywords).then(res=> {
				let data = res.data;
				if(data.code == 0){
					this.data = data;
				}else if(data.code == 1111){
                    vm.logout();
                }else{
					vm.$message.error(data.msg);
				}
			})
		},
        logout(){
            let vm = this,
            arr  = {
				password: '',
				username: '',
				checked : ''
			};
            vm.$router.push('/login');
            vm.$storage.localSet('userinfo',arr);
        },
        search(keywords){
           this.getplanlist(this.token.logincode,keywords); 
        }
	}
}
</script>
<style lang="less" scoped>
.planlist{
    .search{
        margin: 10px;
        padding: 5px;
        border-radius: 12px;
        background-color: #F5F7FA;
        box-shadow: 0 1px 0 0 rgba(0 0 0, 0.5);
        /deep/.el-input__inner{
            border: 0;
            background-color: #F5F7FA;
        }
        /deep/.el-input-group__append{
            border: 0;
        }
    }

    .null{
        margin: 10px;
        padding: 50px 15px;
        border-radius: 12px;
        text-align: center;
        background-color: #fff;
        box-shadow: 0 1px 0 0 rgba(0, 0, 0,.5);
        img{
            display: block;
            margin: 0 auto;
        }
        p{
            font-size: 16px;
            color: #888;
        }
    }
    .col-12{
        // width: 50%;
        padding: 8px;
        float: left;
        @media screen and (max-width: 800px) {
            width: 100%;
		}
		@media screen and (min-width: 801px) {
            width: 50%;
		}
    }
    .item{
        height: 180px;
        overflow: hidden;
        padding: 15px;
        border-radius: 12px;
        background-color: #fff;
        display: flex;
        align-items: center;
        transition: 0.4s;
        cursor: default;
        box-shadow: 0 1px 0 0 rgba(0, 0, 0,.5);
        &:hover{
            h3{
                color: #FA7B00;
            }
            .desc p{
                color: rgb(240, 160, 80);
            }
            box-shadow: 0 30px 80px -20px rgba(0, 0, 10, 0.1), 0 30px 70px -30px rgba(0, 0, 0, 0.7);
        }
        .type{
            width: 100%;
            height: 50px;
            position: absolute;
            bottom: 0;
            left: 0;
            text-align: center;
            line-height: 60px;
            font-size: 14px;
            color: #fff;
            overflow: hidden;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.5) 100%);
        }
        .thumb{
            width: 120px;
            height: 150px;
            display: block;
            flex-shrink: 0;
            margin-right: 20px;
            border-radius: 12px;
            overflow: hidden;
            position: relative;
            background: rgba(0,0,0,0.05);
        }
        .plan-info{
            h3{
                margin: 8px 0;
                font-size: 15px;
                transition: 0.4s;
            }
            p{
                color: #888;
                font-size: 14px;
                line-height: 22px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
                transition: 0.4s;
            }
            .desc{
                height: 66px;
                overflow: hidden;
            }
            .el-button{
                margin: 10px 0;
                color: #fff;
                border-radius: 5px;
                border-color: #FA7B00;
                background-color: #FA7B00;
            }
        }
    }
    .loop(@n, @i: 1) when (@i =< @n) {
        .ani@{i} {
            transition: all 0.2s linear;
            animation-name: toLeft; // toBottom
            animation-duration: .6s; // 注释掉 会没有动画 就是帕帕一帧一帧的出来
            animation-fill-mode: both;
            animation-delay: (@i * 100 + 100ms);
        }
        .loop(@n, (@i + 1));
    }
    .loop(11);
    @keyframes toLeft {
        0% {
            opacity: 0;
            transform: translate3d(-30px, 0, 0);
        }

        100% {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }
}
</style>